<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .custom-alert {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #8ebb7d;
            padding: 20px;
            border: 0px solid #090909;
            border-radius: 5px;
            display: none;
        }

        .submit-text-color {
            color: #326c9d;
        }

        .reset-text-color {
            color: red;
        }
    </style>
</head>
<body style=" padding-left: 10%; padding-top: 20px; font-size: 18px; font-family: Arial, sans-serif; ">
<h1>二维码生成器</h1>
<hr>
<h2>1. 生成普通二维码</h2>
请输入文本内容：
<input type="text" id="commonText" placeholder="请输入文本内容">
<button onclick="generateQRCode()" class="submit-text-color">生成普通二维码</button>
<button onclick="resetImg('qrcodeImg', 'commonText')" class="reset-text-color">重置</button>
<hr>
<img id="qrcodeImg"/><br>

<h2>2. 生成带logo的二维码</h2>
<form id="logoForm" action="/simple_qrcode/github-generate-qrcode-with-logo" method="post" enctype="multipart/form-data"
      target="logoIframe">
    请输入文本内容：<input type="text" name="text" id="logoText" placeholder="请输入文本内容"><br>
    请选择图片：<input type="file" name="logo"><br>
    <input type="submit" value="生成带logo的二维码" class="submit-text-color">
    <input type="reset" value="重置" class="reset-text-color">
</form>
<iframe id="logoIframe" name="logoIframe" style="display: none"></iframe>
<hr>
<h2>3. 生成带颜色的二维码(如果设置了R、G、B值，则选择框中颜色将失效)</h2>
请输入文本内容：
<input type="text" id="colorText" placeholder="请输入文本内容"/><br>
<input type="radio" name="color" value="red" checked/>红色
<input type="radio" name="color" value="green"/>绿色
<input type="radio" name="color" value="blue"/>蓝色
<input type="radio" name="color" value="black"/>黑色
<input type="radio" name="color" value="white"/>白色
<input type="radio" name="color" value="gray"/>灰色
<input type="radio" name="color" value="yellow"/>黄色
<input type="radio" name="color" value="purple"/>紫色
<br>
R:<input type="number" name="r" id="r" min="0" max="255" placeholder="0~255" style="width: 70px; "/>
G:<input type="number" name="g" id="g" min="0" max="255" placeholder="0~255" style="width: 70px;"/>
B:<input type="number" name="b" id="b" min="0" max="255" placeholder="0~255" style="width: 70px; "/><br/>
<button onclick="generateColorQRCode()" class="submit-text-color">生成带颜色的二维码</button>
<button onclick="resetImg('colorQRCodeImg', 'colorText')" class="reset-text-color">重置</button>
<br>
<img id="colorQRCodeImg"/><br>
<hr>
<h2>4. 生成带背景的二维码</h2>
<form id="bgForm" action="/simple_qrcode/github-generate-qrcode-with-bg" method="post" enctype="multipart/form-data"
      target="bgIframe">
    请输入文本内容：<input type="text" name="text" id="bgText" placeholder="请输入文本内容"><br>
    请选择透明度:<input type="number" name="opacity" value="50" min="0" max="100"><br>
    请选择图片：<input type="file" name="logo"><br>
    <input type="submit" value="生成带背景的二维码" class="submit-text-color">
    <input type="reset" value="重置" class="reset-text-color">
</form>
<iframe id="bgIframe" name="bgIframe" style="display: none"></iframe>
<hr>
<h2>5. 生成特殊图案二维码</h2>
请输入文本内容：
<input type="text" id="specialText" placeholder="请输入文本内容">
<button onclick="generateSpecialQRCode()" class="submit-text-color">生成特殊图案二维码</button>
<button onclick="resetImg('specialQRCodeImg', 'specialText')" class="reset-text-color">重置</button>
<br>
<img id="specialQRCodeImg"/>
<hr>
<h2>6. 生成图片填充的二维码</h2>
<form id="imgFillForm" action="/simple_qrcode/github-generate-qrcode-with-fill-img" method="post"
      enctype="multipart/form-data"
      target="imgFillIframe">
    请输入文本内容：<input type="text" name="text" id="imgFillText" placeholder="请输入文本内容"><br>
    请选择图片：<input type="file" name="logo" id="imgFill"><br>
    <input type="submit" value="生成图片填充的二维码" class="submit-text-color">
    <input type="reset" value="重置" class="reset-text-color">
</form>
<iframe id="imgFillIframe" name="imgFillIframe" style="display: none"></iframe>

<div class="custom-alert" id="customAlert">这是一个自定义弹窗消息。</div>


<script type="text/javascript">
    document.getElementById('logoForm').addEventListener('submit', function (event) {
        let logoInput = document.getElementById('logoText');
        let logo = logoInput.value.trim();
        if (logo === "") {
            showCustomAlert("请输入文本内容！");
            event.preventDefault();
            return;
        }
        changeIframeHeight('logoIframe', 200, 200, 5000)
    })
    document.getElementById('bgForm').addEventListener('submit', function (event) {
        let logoInput = document.getElementById('bgText');
        let logo = logoInput.value.trim();
        if (logo === "") {
            showCustomAlert("请输入文本内容！");
            event.preventDefault();
            return;
        }
        changeIframeHeight('bgIframe', 200, 200, 5000)
    })

    document.getElementById('imgFillForm').addEventListener('submit', function (event) {
        let imgFillInput = document.getElementById('imgFillText');
        let text = imgFillInput.value.trim();
        if (text === "") {
            showCustomAlert("请输入文本内容！");
            event.preventDefault();
            return;
        }
        let imgFill = document.getElementById('imgFill')
        console.log(imgFill.value)
        if (imgFill.value === "") {
            showCustomAlert("请选择图片！");
            event.preventDefault();
            return;
        }
        changeIframeHeight('imgFillIframe', 200, 200, 5000)
    })

    function generateQRCode() {
        let qrcodeImg = document.getElementById("qrcodeImg")
        let text = document.getElementById("commonText").value
        if (text === "") {
            showCustomAlert("请输入文本内容！");
            return;
        }
        qrcodeImg.src = "/simple_qrcode/github-generate-qrcode?text=" + text
    }

    function generateSpecialQRCode() {
        let text = document.getElementById("specialText").value
        if (text === "") {
            showCustomAlert("请输入文本内容！");
            return;
        }
        let qrcodeImg = document.getElementById("specialQRCodeImg")
        qrcodeImg.src = "/simple_qrcode/github-generate-qrcode-with-special?text=" + text
    }

    function generateColorQRCode() {
        let colorText = document.getElementById("colorText").value
        if (colorText === "") {
            showCustomAlert("请输入文本内容！");
            return;
        }
        let radios = document.getElementsByName("color");
        let color = radios[0].value;
        for (let i = 1; i < radios.length; i++) {
            if (radios[i].checked) {
                color = radios[i].value;
                break;
            }
        }
        let colorQRCodeImg = document.getElementById("colorQRCodeImg")

        let r = document.getElementById("r").value
        let g = document.getElementById("g").value
        let b = document.getElementById("b").value
        colorQRCodeImg.src = "/simple_qrcode/github-generate-qrcode-with-color?text=" + colorText + "&color=" + color + "&r=" + r + "&g=" + g + "&b=" + b
    }

    function changeIframeHeight(id, height, width, expireTime) {
        let iframe = document.getElementById(id)
        iframe.style.display = "block"
        iframe.height = height + "px"
        iframe.width = width + "px"
        showCustomAlert("请在" + expireTime / 1000 + "秒内完成扫码操作！")
        setTimeout(function () {
            iframe.style.display = "none"
        }, expireTime)
    }

    function showCustomAlert(content, expireTime) {
        var customAlert = document.getElementById('customAlert');
        customAlert.style.display = 'block';
        customAlert.textContent = content;
        setTimeout(function () {
            customAlert.style.display = 'none';
        }, expireTime || 1000); // 1000 毫秒后自动关闭弹窗，可根据需要调整时间
    }

    function resetImg(imgId, contentId) {
        document.getElementById(imgId).src = "";
        document.getElementById(contentId).value = "";
        document.getElementById(contentId).placeholder = "请输入文本内容";
    }
</script>
</body>
</html>